import React,{FC} from 'react';

import {Button,Form,Input,Select,message } from 'antd';

import {useDispatch} from 'umi';

const { Option } = Select;

interface Iprops{
    item:any,
    data:any
}

const ElForm:FC<Iprops> = ({item,data}) => {
    let [form] = Form.useForm();

    interface ITop{
        text:string
    }

    const top:ITop[] = item.top;

    const con:any[] = item.con;

    const submitApi:string = item.submitApi;

    const dispatch = useDispatch();

    const onFinish = (values: any) => {
        let result:any = dispatch({
            type:'consumer/setIdentity',
            payload:{
                type:submitApi,
                data:values
            }
        })

        result.then((res:any) => {
            if(res.code === 1){
                message.success('添加成功')
            }else{
                message.error('暂未开通')
            }
            form.resetFields();
        })
    };
    
    return <Form 
                form={form} 
                style={{width:'30%',margin:'10px',border:'1px solid gray',padding:'10px'}}
                onFinish={onFinish}
            >
                <div className="header">
                    {top.map(item => <Button key={item.text}>{item.text}</Button>)}
                </div>
                <div className="con">
                    {
                        con.map((item:any,index) => {
                            if(item.type === 'input'){
                                return <Form.Item
                                    name={item.field}
                                    rules={item.rules}
                                    key={`${index}-${item.field}`}
                                >
                                    <Input placeholder={item.placeholder} />
                                </Form.Item>
                            }else if(item.type === 'select'){
                                return <Form.Item
                                    name={item.field}
                                    rules={item.rules}
                                    key={`${index}-${item.field}`}
                                >
                                    <Select style={{ width: 120 }} placeholder={item.placeholder}>
                                        {data[item.optionType].map((val:any) => <Option value={val[item.field]}>{val[item.text]}</Option>)}
                                    </Select>
                                </Form.Item>
                            }
                        })
                    }
                    
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button htmlType="button" onClick={() => form.resetFields()}>
                            重置表单
                        </Button>
                    </Form.Item>
                </div>
            </Form>
}

export default ElForm